<template>
    <h1>父组件</h1>
    <p>{{ str1 }}</p>
    <h2>{{ str1 }}---{{ str2 }}</h2>
    <!-- 2.使用子组件 -->
    <child 
    :msg1="msg1" 
    :send="msg2" 
    :num="num" 
    @handleA="son1"
    @handleB="son2"
    ref = "myson"
     >
     
    </child>
</template>
<script lang="ts" setup>
// 1.引入子组件 
import child from './child.vue';
import { nextTick, ref, } from 'vue';
let msg1 = ref("我是父组件")
let msg2 = ref("给爸爸买了七匹狼")
let num = ref(10)

let str1 = ref('')
let str2 = ref('')

function son1(val: any) {
    console.log(val)
    str1.value = val
}
function son2(val: any) {
    console.log(val)
    str2.value = val
}
let myson: any = ref()
// 用ref获取dom 
// 1.给标签用ref起个名，不能跟变量重名
// 2.使用ref声明一个响应式， 名字跟ref起的名一样，不能赋值
nextTick(() => {//解决获取不到dom的时候
    //相当于vue2的this.$refs.myson.handleY() 通过ref调用子组件的方法
    console.log(myson.value.son3)
    myson.value.handleY()
})
</script>